@import "../var.less";
@import "../mixins/clearfix.less";

@info-color: #999999;

#driverView{
  .main{position: relative;}
  .card-list{
    margin-bottom: -10px;
    .ivu-card{margin-bottom: 10px;}
  }
  .driver-card{
    .clearfix();
    display: block;position: relative;color: @text-color;font-size: @font-size-small;

    >.media{
      width: 35%;float: left;margin-right: 10px;text-align: center;
      >.pic{
        width: 75px;height: 75px;border: 3px solid #CCCCCC;color: #CCCCCC;padding: 2px;margin: 0 auto;cursor: pointer;
        >img{display: block;width: 100%;height: 100%;}
      }
      >.name{line-height: 28px;font-weight: 600;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
      >.phone{color: @info-color;line-height: 19px;}
      >p{line-height: 23px;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    }
    >.info{
      overflow: hidden;
      >.info-item{
        line-height: 23px;
        label{color: @info-color;}
        &:first-child{
          text-align: right;line-height: 30px;
          span{font-size: 18px;vertical-align: bottom;}
        }
        >.col{display: inline-block;width: 50%;}
      }
    }

    &:hover{
      .pic{border-color: @primary-color;box-shadow: 0 0 5px 0 fade(@primary-color, 50%);}
    }
  }
}

#driverDetail{
  position: relative;
  .main-right{width: 270px;}
  .main-left{
    width: calc(~"100% - 270px");
  }

  .driver-media{
    height: 300px;font-size: @font-size-small;
    .pic{
      width: 200px;height: 220px;line-height: 210px;margin: 0 auto;text-align: center;
      border: 3px solid #CCCCCC;color: #CCCCCC;padding: 2px;
      >img{width: 100%;height: 100%;display: block;}
    }
    .name{
      font-size: @font-size-base;
      line-height: 40px;text-align: center;
      >span:first-child{font-weight: 600;}
    }
    .more{line-height: 40px;text-align: right;}
  }
  .driver-info{
    height: 253px;font-size: @font-size-small;
    .info-item{
      height: 36px;position: relative;
      >label{float: left;}
      >span{overflow: hidden;display: block;}
      >a{position: absolute;right: 0;top: 0;}
    }
  }

  .sub-content{
    position: relative;margin-top: 15px;
    >.ivu-row{
      &:not(:first-child){
        margin-top: 15px;
      }
    }
  }

  .chart-col{
    width: 270px;
    +.ivu-col{
      width: calc(~"100% - 270px");height: 304px;
      .ivu-card{
        height: calc(~"100% - 47px");
        .ivu-card-body{height: 100%;}
      }
      .search-box{height: 32px;text-align: right;margin-top: 15px;}
    }
  }

  .block {
    clear: both;margin-top: 0;padding: 0;
    >.block-header{
      margin-bottom: 10px;
      >h2{font-size: 16px;font-weight: 600;text-align: center;color: @title-color;}
    }
    >.block-body{clear: both;padding: 0;}
  }

  .dash-board-box{
    width: 100%;height: auto;
    >.dash-board-foot{
      width: 100%;height: auto;margin-top: -28px;
      .rank{
        width: 50%;margin: 0 auto;text-align: center;height: 28px;line-height: 28px;margin-bottom: 5px;
        background: #FFCC00;border-radius: 20px;
        >.rank-num{font-size: 16px;font-weight: bold;}
      }
      .info{
        width: 100%;display: table;height: 28px;line-height: 28px;
        >span{display: table-cell;text-align: center;}
      }
    }
  }

  .info-grid{
    height: 100%;
    >.grid-item{
      height: 50%;position: relative;
      &:first-child{
        padding-bottom: 16px;
        &:after{
          position: absolute;content: '';height: 1px;left: 0;right: 0;bottom: 0;background: @border-color-split;
        }
      }
      &:last-child{padding-top: 16px;}
    }
  }

  .data-box{
    height: 94px;text-align: center;
    >.data-number{
      height: 60px;line-height: 70px;font-size: 28px;
      >.unit{font-size: 12px;color: #999999;}
    }
    >.data-name{font-size: 12px;line-height: 24px;color: #999999;}
  }

  .list-info{
    height: 220px;
    >.list-item{
      height: 44px;line-height: 44px;
      >.item-name{float: left;}
      >.item-number{
        overflow: hidden;text-align: right;
        >.number{font-size: 20px;margin-right: 10px;}
      }
    }
  }

  .habits-desc{
    font-size: @font-size-small;
    >span:not(:last-child){margin-right: 10px;}
  }
}
